<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<style>

    table.dataTable thead th {
        background-color: #d9ebf9;
        border-bottom: 0;
    }

    table.dataTable tbody tr:odd {
        background-color: #f5fafe;
    }

    .highlight {
        background: #51b2f6 !important;
    }

    .tooltip {
        text-align: left;
        white-space: pre-wrap;
        display: none;
        z-index: 9900000;
        outline: none;
        padding: 5px;
        border-width: 1px;
        border-style: solid;
        border-radius: 5px;
        -moz-border-radius: 5px 5px 5px 5px;
        -webkit-border-radius: 5px 5px 5px 5px;
        border-radius: 5px 5px 5px 5px;
    }

    .el-select__tags {
        max-width: 300px !important;
    }

    /* 框的高度 */
    .el-input__inner {
        height: 33px !important;
        /*padding-left: 10px !important;*/
    }

    .el-range-separator {
        margin-left: -1px;
        margin-top: -7px !important;
    }

    /* 日期选择器的字 */
    .el-range-input {
        font-size: 13px !important;
        margin-left: 1px !important;
    }

    .el-input__suffix {
        margin-top: -2px !important;
    }

    /* 多选款选项标签背景 */
    .el-tag el-tag--info el-tag--small el-tag--light {
        height: 25px !important;
    }

    .el-range__close-icon {
        margin-top: -3px !important;
        margin-left: 1px !important;
    }

    /* 下拉框右边的箭头图标 */
    .el-icon-arrow-up {
        margin-top: 4px !important;
    }

    /* 日期标志 */
    .el-icon-time {
        margin-top: -2.5px !important;
    }

    .is-reverse {
        margin-top: -1px !important;
    }

    .el-form-item__label {
        /*color: #FFFFFF !important;*/
        font-weight: bold;
        margin-top: -3px !important;
    }

</style>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <title>干扰监测分析系统</title>
    <link rel="stylesheet" type="text/css" th:href="@{/element-ui/lib/theme-chalk/index.css}"/>
    <style type="text/css">
        .oneLine {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .is-dark {
            text-align: center !important;
        }


        .el-tooltip__popper {
            max-width: 50%
        }

        .el-table .cell {
            line-height: 15px !important;
            text-align: center;
        }

        .el-table__body-wrapper {
            z-index: 2;
        }
        .el-form-item__label {
            /*color: #FFFFFF !important;*/
            font-weight: bold;
        }

    </style>
</head>
<body>
<div id="app" style="padding:20px">
    <div>
        <div style="display: flex;flex-direction:column;">
            <el-form :model="form" :inline="true" label-position="right" label-width="80px" >
                <!-- 编写查询条件输入组件 -->
                <el-row style="height: 40px;">
                    <el-col style="width: 25%">
                        <el-form-item prop="account" label="账号">
                            <el-input
                                    style="width: 213px;;height: 36px;"
                                    placeholder="请输入..."
                                    v-model="form.account"
                                    clearable>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

        </div>

        <div style="display: flex;height:80%">
            <template>
                <div style="display: flex;flex-direction:column;width: 100% !important;max-height:100%">
                    <div style="padding-bottom: 10px">
                        <el-row>
                            <el-col :span="24" style="margin-left: 10px" >
                                <el-button id="queryBtn" type="primary" icon="el-icon-search"  class="el-button el-button--mini"
                                           @click="queryData()"
                                           style="padding-left: 11px;padding-top: 5px;width: 73px;height: 28px;font-size: 13px;"
                                >查询
                                </el-button>
                            </el-col>
                        </el-row>
                    </div>
                    <el-table
                            ref="listData"
                            :data="listData"
                            v-loading="loading"
                            :header-cell-style="headStyle"
                            border
                            :height="'100% !important'"
                            :cell-style="rowStyle"
                            @selection-change="handleSelectionChange"
                            style="max-width: 100%!important">
                        <el-table-column type="index" label="序号" width="60"  :index="typeIndex"></el-table-column>
                        <el-table-column type="id" label="数据编号" v-if="false"></el-table-column>
                        <el-table-column type="selection"  width="60"  ></el-table-column>
                        <el-table-column prop="userName" label="账户名" :show-overflow-tooltip='true' ></el-table-column>
                        <el-table-column prop="account" label="账号" :show-overflow-tooltip='true' ></el-table-column>
                        <el-table-column prop="password" label="密码" :show-overflow-tooltip='true' ></el-table-column>
                        <el-table-column prop="createTime" label="创建时间" :show-overflow-tooltip='true' ></el-table-column>
                    </el-table>


                    <div style="margin-top: 5px;width: 100%">
                        <el-pagination
                                style="float: right"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-sizes="[10, 25, 50, 100]"
                                :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total">
                        </el-pagination>
                    </div>
                </div>
            </template>
        </div>

    </div>
</div>

</body>
<input id="ctxPath" th:value="${#httpServletRequest.getContextPath()}" hidden>
</html>
<script type="text/javascript" th:src="@{/js/jquery/jquery-3.3.1.js}"></script>
<script type="text/javascript" th:src="@{/vue/vue.js}"></script>
<script type="text/javascript" th:src="@{/vue/moment.min.js}"></script>
<script type="text/javascript" th:src="@{/element-ui/lib/index.js}"></script>
<script type="module" th:src="@{/templatesJs/userCenter/list.js}" ></script>


